<template>
  <div id="login">
    <el-card>
      <h2 style="margin: 10px 0px 40px 0px;">欢迎登录</h2>
      <el-form :label-position="labelPosition" label-width="50px" :model="formLabelAlign" v-model="labelPosition"
        @keyup.enter.native="login">

        <el-form-item label="账号">
          <el-input v-model="formLabelAlign.account" placeholder="请输入您的账号" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="请输入您的密码" v-model="formLabelAlign.password" show-password maxlength="16"></el-input>
        </el-form-item>

        <el-button @click="login" :plain="true">登录</el-button>

        <el-tag size="mini">
          <router-link to="reg" class="custom-link">没有账号？点我注册</router-link>
        </el-tag>

      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'login',
  data() {
    return {
      token: null, // 在这里存储登录成功后获取的token或session ID  
      userlist: [],
      labelPosition: 'left',
      formLabelAlign: {
        account: '',
        password: ''
      }
    }
  },
  created() {
    this.$axios.get("http://localhost:3000/users").then(res => {
      this.userlist = res.data
      console.log(res)
    })
      .catch(error => {
        console.log(error);
      })
  },
  methods: {
    login() {

      //验证不能为空
      const { account, password } = this.formLabelAlign;
      if (!account || !password) {
        this.$message.error('请输入账号和密码！');
        return;
      }

      const userInfo = this.userlist.find(user => user.account === account && user.password === password);
      if (userInfo) {
        this.$message({
          message: '登录成功！',
          type: 'success'
        });

        // 存储用户信息到本地  
        localStorage.setItem('userinfo', account);

        // 延迟跳转
        setTimeout(() => {
          // 在这里进行跳转操作，例如：
          this.$router.push('/');
        }, 3000); // 延迟时间为2秒（2000毫秒）

      } else {
        this.$message.error('账号或密码错误！');
      }
    },

    // 获取user数据
    getData() {
      this.$axios.get('http://localhost:3000/users')
        .then((res) => {
          const { status, data } = res;
          if (status === 200) {
            this.list = data;
          }
        })
        .catch((err) => {
        })
    },
  }
}
</script>

<style scoped>
* {
  font-weight: bold;
}

.custom-link {
  color: #409EFF;
  text-decoration: none;
}


#login {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background: linear-gradient(to right, #f2709c, #79CBCA, #E684AE);
  background-size: 200% auto;
  animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.el-card {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 380px;
  border-radius: 20px;
  width: 450px;
}

form {
  width: 380px;
}

button {
  width: 100px;
  margin: 10px 0px 30px 0px;
}

.el-tag {
  margin-left: 250px;
}

</style>
